<template>
  <zm-dialog :title="typeTitle" :visible.sync="value" append-to-body :before-close="dialogClose" :close-on-click-modal="false" size="large" class="select-type-style">
    <div class="ptb20 plr10">
      <el-radio-group v-model="type" size="small" class="db select-type">
        <!-- <div class="db"> -->
          <el-radio class="mb20 fb radio-style" v-for="(item, index) in typeList" :key="index" :label="item.value">
            <div class="type-item-radio df-center">
              <div class="flex-one">
                <div class="fs20 mb10">{{ item.label }}</div>
                <div class="fs14 lh-auto">{{ item.desc }}</div>
              </div>
              <svg-icon :icon-class="item.icon" class="type-icon"></svg-icon>
            </div>
          </el-radio>
        <!-- </div> -->
      </el-radio-group>
    </div>
    <div slot="footer" class="tr">
      <el-button @click="dialogClose">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </zm-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialogMixin'
import { complaint } from '@/api'
export default {
  mixins: [dialogMixin],
  props: {
    typeList: {
      type: Array,
      default: this.list
    },
    typeTitle: {
      type: String,
      default: '标题'
    }
  },
  data () {
    return {
      type: '1',
      list: [
        {
          label: '日常销售单',
          value: '1',
          desc: '日常团体、福利销售单，不可更改产品规则',
          icon: 'concact'
        },
        {
          label: '特殊销售单',
          value: '2',
          desc: '用于团体票务市场，特殊定价或提成可修改需申请特殊',
          icon: 'factory'
        },
        {
          label: '客情销售单',
          value: '3',
          desc: '用于客户客情回馈，不计入提成和个人销售总额中',
          icon: 'customer'
        },
        {
          label: '包场销售单',
          value: '4',
          desc: '用于影院包场销售用',
          icon: 'film'
        },
        {
          label: '客诉销售单',
          value: '5',
          desc: '客服投诉处理用，不计入提成和个人销售总额中',
          icon: 'service'
        },
        {
          label: '实物销售单',
          value: '6',
          desc: '用于实物商品销售使用',
          icon: 'goods'
        }
      ],
      formRule: {
        point: [
          {
            required: true,
            message: '请输入点数!'
          }
        ]
      },
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      }
    }
  },
  created () { },
  methods: {
    async submit () {
      this.$emit('after-save', this.type)
      // this.dialogClose()
    }
  }
}
</script>
<style lang="scss">
@media screen and (max-width: 768px) {
  .zm-dialog .el-dialog{
    width:80%;
  }
  .lh-auto{
    line-height: 1.5;
  }
}
.select-type{
  .el-radio{
    white-space: break-spaces;
  }
}
.select-type-style {
  .select-type {
    .el-radio__label {
      flex: 1;
    }
    .type-icon {
      font-size: 40px;
    }
  }
  .type-item-radio {
    // width: 100%;
    padding: 20px;
    border: 1px solid #dedede;
  }
}
.radio-style{
  display: flex;
  width:48%;
  align-items: center;
  float: left;
  margin-right:10px;
}
</style>
